<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
</head>
<body>
	<button id="btn1">建立连接</button>
	<button id="btn2">发送信息</button>
	<button id="btn3">断开连接</button>
	<script>
		const btn1 =	document.querySelector('#btn1')
		const btn2 =	document.querySelector('#btn2')
		const btn3 =	document.querySelector('#btn3')
		let ws;
		// websocket通信原生基础语法
		// 1. 和服务器建立连接 new WebSocket('服务器地址')
		// 2. 如果建立连接成功会触发onopen方法
		// 3. 发送信息使用send方法ws.send('在么? 在干嘛??')
		// 4. 接收服务器发送的信息 使用 onmessage函数
		// 5. 断开链接 直接调用close()   监听是否断开链接 onclose = ()=> {}
		btn1.onclick = () => {
			// 1. 和服务器建立连接 new WebSocket('服务器地址')
		 ws =	new WebSocket('wss://echo.websocket.org')
		  // 2.如果建立连接成功会触发onopen方法
		 ws.onopen = () => {
			 console.log('连接成功,呼应上了');
		 }
		 ws.onmessage = (res) => {
			 console.log(res.data) // .data是服务器发送给客户端的信息
		 }
		 // 如果断开链接，监听是否断开
			ws.onclose = () => {
				console.log('下线了，不聊了');
			}
		}
		btn2.onclick = () => {
			// 发送信息使用send方法
			ws.send('在么? 在干嘛??')
		}
		btn3.onclick = () => {
			ws.close()
		}
	</script>


<!-- 小结
  1. 创建连接 ws = new WebSocket('服务器地址')
	2. 监听是否连接成功 ws.onopen  = ()=>{}
	3. 客户端向服务器发送请求 ws.send('信息')
	4. 客户端接收服务端发送的信息 ws.onmessage = (res)= > {res.data}
	5. 断开 ws.close()
	6. 监听断开状态  ws.onclose = ()> {} 
-->
</body>
</html>